<template>
    <div style="width: 100%;">
      <el-row >
        <el-col :span="24" style="text-align: left;margin-top: 10px;background-color: #F5F5F5;padding: 10px;">
          虚线内签名
        </el-col>
      </el-row>
      <el-row>
          <vue-esign v-if="esign_img"
                     ref="esign"
                     style="border: 1px dashed #c2c1c1;border-radius: 5px;background-color: #E8E8E8;"
                     :height="216"
                     :isCrop="isCrop"
                     :lineWidth="lineWidth"
                     :lineColor="lineColor"
                     :bgColor.sync="bgColor"/>
          <img v-if="imageUrl" :src="resultImg" style="height: 200px;width: 100%;">
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center;margin-top: 5px;">
          <el-button plain @click="handleReset">重签</el-button>
          <el-button plain @click="handleGenerate" v-if="generate">确定</el-button>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import Vue from 'vue'
  import vueEsign from 'vue-esign'

  Vue.use(vueEsign)
  export default {
    name: "Signature",
    data() {
      return {
        lineWidth: 2,
        lineColor: '#000000',
        bgColor: '',
        resultImg: '',
        isCrop: false,
        backgroundColor: '#f5f5f5',
        esign_img: true,
        imageUrl: false,
        generate:true
      }
    },
    methods: {
      handleReset() {
        if(this.esign_img) {
          this.$refs.esign.reset();
        }
        this.resultImg = '';
        this.esign_img = true;
        this.imageUrl = false;
        this.generate = true;
        this.$emit('getSignBase64','');//向父组件传值
      },
      handleGenerate() {
        this.$refs.esign.generate().then(res => {
          // console.log(res)
          this.resultImg = res;
          this.esign_img = false;
          this.imageUrl = true;
          this.generate = false;
          this.$emit('getSignBase64',res);//向父组件传值
        }).catch(err => {
          alert('未签名') // 画布没有签字时会执行这里 'Not Signned'
        })
      }
    }


  }
</script>

<style scoped>

</style>
